<template>
  <Submenu :name="menuList.unique">
    <!-- 父级菜单 -->
    <template slot="title">
      <Icon :type="menuList.meta.icon" />
      <span>{{ menuList.meta.title }}</span>
    </template>
    <template v-for="item in menuList.children">
      <!-- 如果还有子集，继续调用   -->
      <left-menu-nav v-if="item.children&&item.children.length!==0" :menuList='item' :key='item.unique'>
      </left-menu-nav>
      <!-- 子菜单  -->
      <menu-item v-else :key="item.unique" :name="item.unique" :to="item.path">
        <Icon :type="item.meta.icon" />
        <span>{{ item.meta.title }}</span>
      </menu-item>
    </template>
  </Submenu>
</template>

<script>
export default {
  name: 'leftMenuNav',
  props: {
    menuList: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      theme2: 'light'
    };
  }

};
</script>

<style lang="scss" scoped>
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0px;
    display: none;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
.collapsed-menu /deep/ .ivu-icon-ios-arrow-down{
  display: none;
}
</style>
